import { setPhotoAction, setProfileAction } from '@/store/action/profile'
import { Popup, Toast } from 'antd-mobile'
import { useRef } from 'react'
import { useDispatch } from 'react-redux'
import styles from './index.module.scss'
export type ListPopType = {
  visible: boolean
  close: () => void
  type: 'photo' | 'gender'
}

const ListPop = ({ visible, close, type }: ListPopType) => {
  const dispatch = useDispatch()
  const fileInput = useRef<HTMLInputElement>(null)
  // 切换性别
  const editGender = async (gender: string) => {
    await dispatch(setProfileAction('gender', gender))
    close()
  }
  // 点击拍照
  const fileClick = () => {
    fileInput.current!.click()
  }
  const fileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    // console.log(e.target.files![0])
    const formData = new FormData()
    formData.append('photo', e.target.files![0])
    console.log(formData.get('photo'))
    await dispatch(setPhotoAction(formData))
    Toast.show({ icon: 'success', content: '修改成功' })
    close()
  }
  return (
    <Popup visible={visible} position="bottom">
      <div className={styles.root}>
        <input type="file" ref={fileInput} hidden onChange={fileChange} />
        {type === 'photo' && (
          <div>
            <div className="list-item" onClick={fileClick}>
              拍照
            </div>
            <div className="list-item" onClick={fileClick}>
              本地选择
            </div>
          </div>
        )}
        {type === 'gender' && (
          <div>
            <div
              className="list-item"
              onClick={() => {
                editGender('0')
              }}
            >
              男
            </div>
            <div
              className="list-item"
              onClick={() => {
                editGender('1')
              }}
            >
              女
            </div>
          </div>
        )}

        <div onClick={close} className="buttom">
          取消
        </div>
      </div>
    </Popup>
  )
}

export default ListPop
